<template>
    <div>
        <TopNav title="编辑资料" />
        <div class="imgWrapper">
            <van-uploader :after-read="afterRead">
                <img
                    v-if="userInfo.head_img"
                    :src="$axios.defaults.baseURL + userInfo.head_img"
                    alt=""
                    class="avatar"
                />
                <img v-else src="@/assets/1.jpg" alt="" class="avatar" />
            </van-uploader>
        </div>
        <ProfileBar
            label="昵称"
            :desc="userInfo.nickname"
            @click.native="isShowNickname = true"
        />
        <ProfileBar
            label="密码"
            desc="******"
            @click.native="isShowPassword = true"
        />
        <ProfileBar
            label="性别"
            :desc="userInfo.gender == 1 ? '小哥哥' : '小姐姐'"
            @click.native="isShowGender = true"
        />

        <!-- 以上都是咱们的布局 -->
        <!-- 下面可以放弹窗的内容,
        因为弹窗本身的显示布局和样式,
        不受我们控制, 都是组件已经封装好的 -->
        <van-dialog
            v-model="isShowNickname"
            show-cancel-button
            title="修改昵称"
            @confirm="setNickname"
        >
            <van-field v-model="newNickname" placeholder="请输入昵称" />
        </van-dialog>

        <van-dialog
            v-model="isShowPassword"
            show-cancel-button
            title="修改密码"
            @confirm="setPassword"
        >
            <van-field
                type="password"
                v-model="newPassword"
                placeholder="请输入新密码"
            />
        </van-dialog>

        <van-action-sheet
            v-model="isShowGender"
            :actions="genderList"
            @select="setGender"
            cancel-text="取消"
        />

        <!-- after-read 是选中图片后的回调函数, 可以接收到图片数据对象 -->
    </div>
</template>

<script>
    import TopNav from "../../components/TopNav";
    import ProfileBar from "@/components/ProfileBar";
    export default {
        components: {
            TopNav,
            ProfileBar,
        },
        data() {
            return {
                userInfo: {},
                isShowNickname: false,
                isShowPassword: false,
                isShowGender: false,
                genderList: [
                    { name: "男", gender: 1 },
                    { name: "女", gender: 0 },
                ],
                newNickname: "",
                newPassword: "",
            };
        },
        created() {
            this.loadPage();
        },
        methods: {
            loadPage() {
                // 获取数据
                this.$axios({
                    url: "/user/" + localStorage.getItem("userId"),
                }).then((res) => {
                    const { data, message } = res.data;
                    if (message == "获取成功") {
                        this.userInfo = data;
                    }
                });
            },
            setNickname() {
                const data = {
                    nickname: this.newNickname,
                };
                this.editProfile(data);
                this.newNickname = "";
            },
            setPassword() {
                const data = {
                    password: this.newPassword,
                };
                this.editProfile(data);
                this.newPassword = "";
            },
            setGender(action) {
                // console.log("选中了一个性别");
                // console.log(action.gender);
                const data = {
                    gender: action.gender,
                };
                this.editProfile(data);
                this.isShowGender = false;
            },
            editProfile(data) {
                this.$axios({
                    method: "post",
                    url: "/user_update/" + localStorage.getItem("userId"),
                    data,
                }).then((res) => {
                    console.log(res.data);
                    this.loadPage();
                });
            },
            afterRead(fileObj) {
                console.log("这里是文档读取后的回调");
                console.log("可以拿到选中的文件对象");
                console.log(fileObj);
                // 其中我需要传出去的是 file 属性, 里面存放了图片文件

                // 要上传二进制文件, 需要用到 FormData 对象
                const fd = new FormData();
                fd.append("file", fileObj.file);

                // 真正发送请求
                this.$axios({
                    method: "post",
                    url: "/upload",
                    data: fd,
                }).then((res) => {
                    console.log(res.data);
                    const { message, data } = res.data;
                    if (message == "文件上传成功") {
                        console.log(data.url);
                        const newData = {
                            head_img: data.url,
                        };
                        this.editProfile(newData);
                    }
                });
            },
        },
    };
</script>

<style lang="less" scoped>
    .imgWrapper {
        height: 148 /360 * 100vw;
        display: flex;
        justify-content: center;
        align-items: center;
        .avatar {
            height: 70 /360 * 100vw;
            width: 70 /360 * 100vw;
            object-fit: cover;
            // object-fit: contain;
            border-radius: 50%;
        }
    }
</style>